<template>
  <div class="nucleic-ui">
    <div ref="topPart">
      <el-form
        :inline="true"
        size="mini"
        ref="form"
        :model="form"
        class="demo-form-inline"
      >
        <div class="border">
          <el-form-item label="医保类型" v-if="insuranceType">
            <el-select
              v-model="form.medicalInsuranceTypeKey"
              placeholder="--请选择--"
              @change="medicalInsuranceTypeChange"
              style="width: 140px; margin-right: 10px"
            >
              <el-option
                v-for="item in insuranceType"
                :key="'insuranceType' + item.value"
                :label="item.value"
                :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报销类型" v-if="reimburType">
            <el-select
              v-model="form.reimbursementTypeKey"
              placeholder="请选择"
              @change="onSubmit"
              style="width: 140px; margin-right: 10px"
            >
              <el-option
                v-for="item in reimburType"
                :key="'reimburType' + item.value"
                :label="item.value"
                :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input
              placeholder="请输入姓名"
              v-model="form.name"
              clearable
              @blur="onBlur('form', 'name')"
              @keyup.enter.native="onSubmit"
              style="width: 120px"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input
              placeholder="请输入身份证号"
              v-model="form.idCard"
              clearable
              @blur="onBlur('form', 'idCard')"
              @keyup.enter.native="onSubmit"
            ></el-input>
          </el-form-item>

          <el-form-item label="整理状态">
            <el-select
              v-model="form.organizeStatus"
              placeholder="请选择"
              @change="onSubmit"
              style="width: 140px; margin-right: 10px"
            >
              <el-option
                key="zhengli0"
                label="--请选择--"
                :value="null"
              ></el-option>
              <el-option key="zhengli1" label="已整理" value="已整理">
              </el-option>
              <el-option key="zhengli2" label="未整理" value="未整理">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据状态">
            <el-select
              v-model="form.dataStatus"
              placeholder="请选择"
              @change="onSubmit"
              style="width: 140px; margin-right: 10px"
            >
              <el-option key="dataStatus1" label="正常" value="正常">
              </el-option>
              <el-option key="dataStatus2" label="删除" value="删除">
              </el-option>
              <el-option
                key="dataStatus3"
                label="借出"
                value="借出"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采集日期">
            <el-date-picker
              v-model="form.cjsetDates"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="整理日期" v-if="page == 'account'">
            <el-date-picker
              v-model="form.zlsetDates"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <!-- <el-button
              type="danger"
              @click="onReadIDCard"
              icon="el-icon-postcard"
              size="mini"
              >读卡</el-button
            > -->
            <el-button
              type="primary"
              @click="onSubmit"
              icon="el-icon-search"
              size="mini"
              >搜 索</el-button
            >
            <el-button
              type="info"
              @click="onArrange"
              icon="el-icon-add"
              size="mini"
              v-if="page == 'account'"
              >整 理</el-button
            >
            <el-button
              type="info"
              @click="onAddFiles"
              icon="el-icon-add"
              size="mini"
              v-if="page == 'account' || page == 'basic'"
              >新 增</el-button
            >
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              >导 出</el-button
            >
          </el-form-item>
          <!-- <el-form-item>
        <el-button type="info" @click="onResetFun" icon="el-icon-refresh" size="mini">重置</el-button>
      </el-form-item> -->
        </div>
      </el-form>
    </div>
    <div class="nucleic-scroll">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        v-if="theight"
        :height="theight"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          align="center"
          type="selection"
          width="55"
          v-if="page == 'account'"
        >
        </el-table-column>
        <el-table-column
          prop="index"
          label="序号"
          width="70"
          align="center"
          fixed="left"
        >
        </el-table-column>

        <el-table-column
          label="医保类型"
          align="center"
          prop="medicalInsuranceType"
          fixed="left"
        />
        <el-table-column
          label="报销类型"
          align="center"
          width="120"
          prop="reimbursementType"
          fixed="left"
        />
        <el-table-column label="姓名" align="center" prop="name" fixed="left" />
        <el-table-column
          label="身份证号"
          width="200"
          align="center"
          prop="idCard"
          fixed="left"
        />
        <el-table-column label="性别" align="center" prop="sex" />
        <el-table-column label="年龄" align="center" prop="age" />
        <el-table-column label="总费用" align="center" prop="totalCost" />
        <el-table-column
          label="统筹支付"
          align="center"
          prop="coordinatedPayment"
        />
        <el-table-column
          label="盒号"
          width="100"
          align="center"
          prop="storageLocation"
        />
        <el-table-column
          label="文件号"
          width="100"
          align="center"
          prop="fileNumber"
        />
        <el-table-column
          label="整理状态"
          align="center"
          prop="organizeStatus"
        />
        <el-table-column label="数据状态" align="center" prop="dataStatus" />
        <el-table-column
          label="采集者"
          width="100"
          align="center"
          prop="gatherer"
        />
        <el-table-column
          label="采集日期"
          align="center"
          prop="collectionTime"
          width="140"
        >
          <template slot-scope="scope">
            <span>{{
              parseTime(scope.row.collectionTime, "{y}-{m}-{d}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="整理者"
          align="center"
          prop="organizer"
          width="100"
        />
        <el-table-column
          label="整理日期"
          align="center"
          prop="organizeTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.organizeTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="deletedRemark" />
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          width="200"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <template>
              <el-button
                size="mini"
                @click="editFun(scope.row, false)"
                type="text"
                icon="el-icon-edit"
                v-if="page == 'basic' || page == 'account'"
                >编辑</el-button
              >
              <el-button
                size="mini"
                @click="deleteFun(scope.row)"
                type="text"
                icon="el-icon-delete"
                v-if="page == 'basic'"
                >删除</el-button
              >
              <el-button
                size="mini"
                @click="editFun(scope.row, false)"
                type="text"
                icon="el-icon-upload2"
                v-if="page == 'account'"
                >上传资料</el-button
              >
              <el-button
                size="mini"
                @click="viewRefer(scope.row)"
                type="text"
                v-if="page == 'refer' || page == 'manage'"
                >查看</el-button
              >
              <el-button
                size="mini"
                @click="viewBorrower(scope.row, '借阅')"
                type="text"
                v-if="page == 'manage'"
                >借阅</el-button
              >
              <el-button
                size="mini"
                @click="viewBorrower(scope.row, '归还')"
                type="text"
                v-if="page == 'manage'"
                >归还</el-button
              >
              <el-button
                size="mini"
                @click="viewLog(scope.row)"
                type="text"
                v-if="page == 'manage'"
                >日志</el-button
              >
            </template>
            <!-- <template
              v-if="
                page == 'query' ||
                (page == 'add' && scope.row.status == 1) ||
                (page == 'upshifting' && scope.row.status == 1)
              "
            >
              <el-button
                size="mini"
                @click="viewDetail(scope.row)"
                type="text"
                icon="el-icon-view"
                >详情</el-button
              >
            </template>
            <template v-if="page == 'upshifting' && scope.row.status == 0">
              <el-button
                size="mini"
                @click="viewDetail(scope.row)"
                type="text"
                icon="el-icon-setting"
                >提档</el-button
              >
            </template> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row class="pages" :gutter="10" v-if="datadep == 1">
      <el-col :span="24">
        <div style="text-algin: center">
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="pageNum"
            :limit.sync="pageSize"
            :pageSizes="pageSizes"
            @pagination="getTableThird"
          />
          <!-- </el-pagination> -->
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="isAdd ? '新增' : '编辑'"
      :visible.sync="isAddFiles"
      width="400px"
    >
      <add-person
        ref="addPerson"
        :websocket="websocket"
        :id="id"
        :onlyUpload="onlyUpload"
        :isAdd="isAdd"
        :insuranceType="insuranceType"
        @onReadIDCard="onReadIDCard"
        @closeAddFiles="closeAddFiles"
        v-if="isAddFiles"
      />
    </el-dialog>
    <el-dialog title="删除原因" :visible.sync="isDel" width="400px">
      <el-form size="small" label-width="80">
        <el-form-item label="删除原因">
          <el-input
            placeholder="请输入删除原因"
            type="textarea"
            v-model="delResease"
            @blur="onBlur('', 'delResease')"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="delCancle">取消</el-button>
          <el-button @click="delComplete">完成</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="files-add-window" v-if="isAccountAdd">
      <account-add-person
        ref="addPerson"
        :websocket="websocket"
        :id="id"
        :onlyUpload="onlyUpload"
        :isAdd="isAdd"
        :insuranceType="insuranceType"
        @closeAddFiles="closeAccountAdd"
        v-if="isAccountAdd"
      />
    </div>
    <div class="files-add-window" v-if="isDet">
      <Detail
        :id="id"
        :page="page"
        @closeDetail="closeDetail"
        @getTableThird="getTableThird"
      />
    </div>
    <div class="files-add-window" v-if="isArrange">
      <Arrange :ids="ids" @goback="closeArrange" />
    </div>
    <div class="files-add-window" v-if="isRefer">
      <div class="files-add-basic">
        <el-form :inline="true" size="mini" class="demo-form-inline">
          <div class="border">
            <el-form-item label="凭证类型：">
              <el-select
                v-model="typeName"
                placeholder="请选择"
                @change="annexChange"
              >
                <el-option key="scanall" label="--全部--" value="--全部--">
                </el-option>
                <el-option
                  v-for="item in reimburBillType"
                  :key="item.value"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="info" size="small" @click="gobackRefer"
                >返回</el-button
              >
            </el-form-item>
          </div>
        </el-form>
        <div class="scan-file-list">
          <div
            class="image-box"
            v-for="(item, index) in showImageList"
            :key="item.filePath"
          >
            <div class="ImgItem">
              <div class="pic-op-btn">
                <i
                  class="el-icon-download pic-download-icon"
                  @click="downloadImg(item, index)"
                  title="下载"
                ></i>
              </div>
              <el-image
                style="width: 100%; height: 120px"
                :src="item.fileShowPath"
                :preview-src-list="srcList"
                fit="contain"
              >
              </el-image>
            </div>
            <p class="scan-filename">{{ item.fileName }}</p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="btnType == '借阅' ? '借阅' : '归还'"
      :visible.sync="isBorrower"
      width="500px"
    >
      <Borrowers
        :arcPersonnelId="arcPersonnelId"
        :btnType="btnType"
        @closeBorrower="closeBorrower"
      />
    </el-dialog>
    <div class="files-add-window" v-if="isLog">
      <borrowers-detail
        :arcPersonnelId="arcPersonnelId"
        @closeBorrower="closeBorrowerLog"
      />
    </div>
  </div>
</template>
<script>
import {
  getTableThird,
  deleteTr,
  educationSub,
  getAnnexList,
} from "@/api/files/basics";
import {
  dictInsuranceType,
  dictReimburType,
  dictReimburBillType,
} from "@/api/index";
import { CreateWebSocket, ReadIDCard, CloseConnect } from "@/api/readCard";
import { getToken } from "@/utils/auth";
import AddPerson from "../components/addPerson.vue";
import AccountAddPerson from "../components/accountAddPerson.vue";
import Arrange from "../components/arrange.vue";
import Detail from "../components/detail.vue";
import Borrowers from "../components/Borrowers.vue";
import BorrowersDetail from "../components/BorrowersDetail.vue";
export default {
  name: "Common",
  components: {
    AddPerson,
    Detail,
    AccountAddPerson,
    Arrange,
    Borrowers,
    BorrowersDetail,
  },
  props: ["page"],
  data() {
    return {
      arcPersonnelId: "",
      btnType: "借阅",
      ids: [],
      isDel: false,
      delResease: "",
      loading: false,
      datadep: 1, //1全部数据 2异常数据
      // 总条数
      total: 0,
      //每一页显示数目
      pageSize: 50,
      //第几页
      pageNum: 1,
      pageSizes: [10, 50, 100, 150, 200],
      result: null,
      form: {
        medicalInsuranceTypeKey: "",
        reimbursementTypeKey: "",
        name: "", //人员姓名
        idCard: "", //身份证号
        organizeStatus: null,
        dataStatus: "正常",
        orderByColumn: "", //排序
        isAsc: "desc", //排序方式 desc：降序 asc：升序
        cjsetDates: [],
        zlsetDates: [],
        params: {
          cjBeginDate: null, //采集日期
          cjEndDate: null,
          zlBeginDate: null, //整理日期
          zlEndDate: null,
        },
      },
      formOrg: {
        medicalInsuranceTypeKey: "",
        reimbursementTypeKey: "",
        name: "", //人员姓名
        idCard: "", //身份证号
        organizeStatus: null,
        dataStatus: "正常",
        orderByColumn: "", //排序
        isAsc: "desc", //排序方式 desc：降序 asc：升序
        cjsetDates: [],
        zlsetDates: [],
        params: {
          cjBeginDate: null, //采集日期
          cjEndDate: null,
          zlBeginDate: null, //整理日期
          zlEndDate: null,
        },
      },
      personnelIdentityList: [], //人员身份
      batchDateList: [], //批次号--含有全部
      batchDateList2: [], //批次号--不含有全部
      tableData: [],
      //详情
      dialogVisible: false,
      details: {},
      family: [],
      //tab
      activeName: "first",
      //上传
      file: "",
      //校验excel
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: getToken() },
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API +
          "/dataAnalysis/v2/common/basedata/import", // todo
      },
      uploadData: {
        dataType: 1,
        batchNumber: "",
      },
      deleteData: {
        batchNumber: "",
      },
      statusDataMsg: "",
      //编辑
      dialogForm: {
        id: "",
        name: "",
        idCard: "",
        township: "",
        village: "",
        notes: "",
      },
      //历史修改数据
      hisDialogVisibles: {
        flag: false,
        tableData: [],
        total: 0,
        //每一页显示数目
        pageSize: 10,
        //第几页
        pageNum: 1,
        pageSizes: [10, 20, 30, 40],
      },
      //导入错误信息查询
      dialogVisibles: {
        flag: false,
        tableData: [],
        total: 0,
        //每一页显示数目
        pageSize: 10,
        //第几页
        pageNum: 1,
        pageSizes: [10, 20, 30, 40],
      },
      dialogDetails: {
        flag: false,
        tableData: [],
        total: 0,
        //每一页显示数目
        pageSize: 10,
        //第几页
        pageNum: 1,
        pageSizes: [10, 20, 30, 40],
      },
      time: null,
      errFileName: "",
      defaultSelected: "",
      multipleSelection: [],
      dialogDelete: false,
      theight: "",
      resizeFlag: null,
      isAddFiles: false,
      websocket: null,
      //dictData: null,
      insuranceType: null,
      reimburType: null,
      id: "",
      onlyUpload: false,
      isAdd: false,
      isDet: false,
      eduList: [],
      isAccountAdd: false,
      multipleSelection: [],
      isArrange: false,
      reimburBillType: [],
      isRefer: false,
      referId: "",

      typeName: "",
      imageList: [],
      showImageList: [],
      srcList: [],
      referObj: {
        id: "",
        reimbursementTypeKey: "",
      },
      isBorrower: false,
      isLog: false,
    };
  },
  created() {
    this.getInsuranceType();
  },
  methods: {
    onReadIDCard() {
      ReadIDCard(this.websocket);
    },
    onBlur(key1, key) {
      this[key1][key] = this[key1][key] ? this[key1][key].trim() : "";
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //整理
    onArrange() {
      let that = this;
      if (that.multipleSelection.length <= 0) {
        that.$message.warning("请先勾选人员");
        return;
      }
      let ids = [];
      that.multipleSelection.forEach((item) => {
        ids.push(item.id);
      });
      that.ids = ids;
      setTimeout(() => {
        that.isArrange = true;
      }, 0);
    },
    //关闭整理
    closeArrange() {
      this.isArrange = false;
      // this.multipleSelection = [];
      // this.ids = [];
      // this.$forceUpdate();
    },
    //新增档案
    onAddFiles() {
      this.id = "";
      if (this.page == "basic") {
        this.isAddFiles = true;
      } else if (this.page == "account") {
        this.isAccountAdd = true;
      }

      this.onlyUpload = false;
      this.isAdd = true;
    },
    //基本信息新增
    closeAddFiles(type) {
      this.isAddFiles = false;
      if (this.isAdd) {
        this.form = JSON.parse(JSON.stringify(this.formOrg));
        this.onSubmit();
      } else {
        this.getTableThird();
      }
    },
    //报销凭证新增
    closeAccountAdd(type) {
      this.isAccountAdd = false;
      if (this.isAdd) {
        this.form = JSON.parse(JSON.stringify(this.formOrg));
        this.onSubmit();
      } else {
        this.getTableThird();
      }
    },
    //医保类型
    getInsuranceType() {
      let params = {};
      dictInsuranceType(params).then((res) => {
        if (res.code == 200) {
          this.insuranceType = res.data;
          this.form.medicalInsuranceTypeKey = "";
          this.getReimburType();
          //this.onSubmit();
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    //报销类型
    getReimburType() {
      let params = {
        medicalInsuranceTypeKey: this.form.medicalInsuranceTypeKey,
      };
      dictReimburType(params).then((res) => {
        if (res.code == 200) {
          this.reimburType = res.data;
          this.form.reimbursementType = "";
          this.onSubmit();
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    //更改医保类型
    medicalInsuranceTypeChange() {
      this.getReimburType();
    },
    handleForm() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.params.cjBeginDate =
        form.cjsetDates && form.cjsetDates[0] ? form.cjsetDates[0] : null;
      form.params.cjEndDate =
        form.cjsetDates && form.cjsetDates[1] ? form.cjsetDates[1] : null;
      form.params.zlBeginDate =
        form.zlsetDates && form.zlsetDates[0] ? form.zlsetDates[0] : null;
      form.params.zlEndDate =
        form.zlsetDates && form.zlsetDates[1] ? form.zlsetDates[1] : null;
      return form;
    },
    getDictData() {
      let params = {};
      dictData(params).then((res) => {
        if (res.code == 200) {
          this.dictData = res.data;
          this.onSubmit();
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    getEducationSub(name) {
      let data = {
        name: name,
      };
      educationSub(data).then((res) => {
        if (res.code == 200) {
          this.eduList = res.data;
        }
      });
    },
    eduChange(value) {
      this.getEducationSub(value);
    },
    onBasicBack() {
      this.isAddFiles = false;
    },
    editFun(row, bool) {
      if (this.page == "basic") {
        this.isAddFiles = true;
      } else {
        this.isAccountAdd = true;
      }
      this.id = row.id;
      this.onlyUpload = bool;
      this.isAdd = false;
    },

    deleteFun(row) {
      let that = this;
      const userIds = row.id;
      this.$modal
        .confirm('是否确认删除用户为"' + row.name + '"的数据项？')
        .then(function () {
          that.isDel = true;
          that.userIds = userIds;
          //return deleteTr(userIds);
        })
        .catch(() => {});
    },
    delComplete() {
      if (this.delResease) {
        const userIds = this.userIds;
        deleteTr(userIds, this.delResease).then((res) => {
          this.userIds = "";
          this.isDel = false;
          this.getTableThird();
          this.$modal.msgSuccess("删除成功");
        });
      } else {
        this.$modal.msgWarning("删除原因不能为空！");
      }
    },
    delCancle() {
      this.userIds = "";
      this.isDel = false;
    },
    onExcelThird() {
      this.upload.title = "Excel导入"; // todo
      this.upload.open = true;
      this.uploadData.batchNumber = "";
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      //this.getTable();
      let { batchNumber } = this.uploadData;

      this.form.params.beginBatchNumber = batchNumber;
      this.form.params.endBatchNumber = batchNumber;
      this.datadep = 1;
      this.getBatchHistoryList();
      //this.getDasedataStatus(batchNumber);
    },
    // 提交上传文件
    submitFileForm() {
      if (this.uploadData.batchNumber) {
        this.$refs.upload.submit();
      } else {
        this.$modal.msgWarning("请选择批次号");
      }
    },
    cancleFileForm() {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
    },
    getTableThird() {
      this.form = JSON.parse(JSON.stringify(this.handleForm()));
      let data = this.form;
      this.loading = true;
      getTableThird(data, this.pageNum, this.pageSize)
        .then((res) => {
          if (res.code == 200) {
            let { rows, total } = res;
            rows.map((item, index) => {
              item.index = (this.pageNum - 1) * this.pageSize + index + 1;
              return item;
            });
            this.tableData = rows;
            this.total = total;
          } else {
            this.tableData = [];
            this.total = 0;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          this.tableData = [];
          this.total = 0;
        });
    },
    //查询数据1
    onSubmit() {
      this.loading = false;
      this.tableData = [];
      this.pageNum = 1;
      this.total = 0;
      this.getTableThird();
    },

    downloadDetail(event) {
      if (event.target.nodeName === "A") {
        let data = {
          fileName: this.errFileName,
        };
        this.downloadGet(
          "/dataAnalysis/v2/common/basedata/errfile/download",
          data,
          `${this.form.params.beginBatchNumber}_${new Date().getTime()}.xlsx`
        );
      }
    },
    onResetFun() {
      this.form.name = "";
      this.form.idCard = "";
      this.form.qualification = "";
      this.form.speciality = "";
      this.form.sources = "";
      this.form.status = "";
      this.getTableThird();
    },
    //查看详情
    viewDetail(row) {
      this.isDet = true;
      this.id = row.id;
    },
    closeDetail() {
      this.isDet = false;
    },
    async update() {
      let h =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight; //浏览器高度
      let topH = this.$refs.topPart.offsetHeight;

      let tableHeight = h - topH - 84 - 150;
      this.theight = tableHeight;
      //console.log(h, this.theight);
      await this.$nextTick();
    },
    getEventData(data) {
      if (!this.isAddFiles) {
        this.form = JSON.parse(JSON.stringify(this.formOrg));
        if (data) {
          let dArr = data.split("|");
          this.form.name = dArr[0].split(":")[1];
          this.form.idCard = dArr[5] ? dArr[5] : "";
        }
        console.log(this.form);
      } else {
        this.$refs.addPerson.getEventData(data);
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      let filename = "档案";
      if (this.page == "add") {
        filename = filename + "新增";
      } else if (this.page == "query") {
        filename = filename + "查询";
      } else if (this.page == "upshifting") {
        filename = filename + "提档";
      }
      this.download(
        "archive/personnel/export",
        {
          ...this.form,
        },
        `人员信息_${new Date().getTime()}.xlsx`
      );
    },
    viewRefer(row) {
      this.referObj = {
        id: row.id,
        reimbursementTypeKey: row.reimbursementTypeKey,
      };
      this.isRefer = true;
      this.getReimburBillType();
    },
    //报销凭证类型
    getReimburBillType() {
      let params = {
        eimbursementTypeId: this.referObj.reimbursementTypeKey,
      };
      dictReimburBillType(params).then((res) => {
        if (res.code == 200) {
          this.reimburBillType = res.data;
          this.typeName = "--全部--";
          this.getAnnexList();
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    //获取个人附件信息
    getAnnexList() {
      this.loading2 = true;
      let data2 = { personnelId: this.referObj.id };
      getAnnexList(data2).then((res) => {
        if (res.code == 200) {
          this.loading2 = false;
          let imageList = [];
          res.data.forEach((item) => {
            let obj = {
              id: item.id,
              fileShowPath: item.fileShowPath, //预览地址
              filePath: item.filePath, //下载地址
              fileName: item.fileName,
              typeName: item.typeName,
            };
            imageList.push(obj);
          });
          this.imageList = imageList;
          if (this.typeName == "--全部--" || !this.typeName) {
            this.showImageList = JSON.parse(JSON.stringify(this.imageList));
          } else {
            this.showImageList = this.sortImgList(
              this.imageList,
              this.typeName
            );
          }
          this.getSrcList();
        } else {
          this.loading2 = false;
          this.$message.warning(res.msg);
        }
      });
    },
    annexChange(value) {
      console.log(value);
      if (value == "--全部--") {
        this.showImageList = JSON.parse(JSON.stringify(this.imageList));
      } else {
        this.showImageList = this.sortImgList(this.imageList, value);
      }
      this.getSrcList();
    },
    sortImgList(list, typeName) {
      let resList = []; //学历证明
      list.forEach((item) => {
        if (item.typeName == typeName) {
          resList.push(item);
        }
      });
      return resList;
    },
    getSrcList() {
      let srcList = [];
      this.showImageList.forEach((item) => {
        srcList.push(item.fileShowPath);
      });
      this.srcList = srcList;
    },
    gobackRefer() {
      this.isRefer = false;
      this.imageList = [];
    },
    //下载图片
    downloadImg(item) {
      //window.location.href = item.path;
      var a = document.createElement("a"); // 创建一个<a></a>标签
      a.href = process.env.VUE_APP_BASE_API + item.filePath; //重点（如测试发现下载文件不存在/找不到，检查路径）
      a.download = item.fileName ? item.fileName : this.fileName; // 设置下载文件文件名
      a.style.display = "none"; // 隐藏a标签
      document.body.appendChild(a); // 将a标签追加到文档对象中
      a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove(); // 一次性的，用完就删除a标签
    },
    viewBorrower(row, type) {
      this.isBorrower = true;
      this.arcPersonnelId = row.id;
      this.btnType = type;
    },
    closeBorrower() {
      this.isBorrower = false;
      this.arcPersonnelId = "";
    },
    viewLog(row) {
      this.arcPersonnelId = row.id;
      this.isLog = true;
    },
    closeBorrowerLog() {
      this.isLog = false;
      this.arcPersonnelId = "";
    },
  },
  mounted() {
    let _this = this;
    this.websocket = CreateWebSocket(this.getEventData);
    //console.log("测试：" + this.$globalData.webSocket);
    // if(!this.$globalData.webSocket){
    //   CreateWebSocket(this.getEventData);
    // }
    _this.update();
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.update();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  beforeDestroy() {
    clearTimeout(this.time);
    CloseConnect(this.websocket);
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.nativePlace {
  width: 100%;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.border {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: 2px solid #ccc;
    left: 0;
    bottom: 0;
  }
}
.nucleic-ui {
  padding: 20px;
  .nucleic-fixed {
    position: fixed;
    top: 80px;
  }
  .pages {
    font-size: 14px;
    color: #333;
    span {
      color: #009688;
    }
    padding: 20px 0;
  }
  .nucleic-scroll {
    width: 100%;
    overflow: auto;
  }
}
.export-dialog {
  width: 100%;
  .detail-title {
    font-size: 14px;
    color: #333;
  }
  p {
    color: #999;
    font-size: 12px;
  }
}
.nucleic-st {
  &-normal {
    color: #606266;
  }
  &-exce {
    color: #f56c6c;
  }
  &-exc {
    color: #409eff;
  }
}
.nucleic-upload {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .text-center {
    margin-left: 10px;
  }
}
.nucleic-imp {
  overflow: hidden;
  clear: both;
  &-msg {
    float: left;
    font-size: 14px;
    > span {
      cursor: pointer;
    }
  }
  &-btn {
    float: right;
  }
}
.files-add-window {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: calc(100vh - 80px);
  background: #fff;
  z-index: 99;
  .scan-file-list {
    clear: both;
    overflow: hidden;
    padding: 20px;
    .image-box {
      float: left;
      margin: 4px;
    }
    .ImgItem {
      width: 240px;
      border: 1px #bbb solid;
    }
  }
}
.ImgItem {
  position: relative;
  .pic-op-btn {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 28px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    > .pic-download-icon {
      display: block;
      cursor: pointer;
      font-size: 24px;
      margin: 0 12px;
    }
    > .del-icon {
      font-size: 24px;
      cursor: pointer;
      display: block;
    }
    > .cropper-btn {
      font-size: 24px;
      cursor: pointer;
    }
  }
}
.scan-filename {
  font-size: 14px;
  width: 100%;
  color: #000;
  text-align: center;
}
</style>
<style rel="stylesheet/scss" lang="scss">
.n-dl {
  color: #409eff;
  cursor: pointer;
  &:hover {
    color: #409eff;
  }
}

.demo-form-inline.el-form--inline .el-form-item__label {
  float: left;
}
</style>
